<template>
  <div class='container-Problem'>
  <el-card>
  <el-row type="flex" justify="end">
    <el-button  type="success" size="small" icon="el-icon-edit" style="margin-bottom: 10px;" @click="$router.push('/questions/new')">新增试题</el-button>
        </el-row>
    
    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="auto" ref="from">
      <el-row  type="flex" class="row-bg" justify="space-between">
      <div style="width:320px">
        <el-form-item label="学科">
    <el-select v-model="formInline.subjectID" placeholder="请选择" size="small" style="width: 240px;" @change="directory(formInline.region1),tag(formInline.region1)">
      <el-option :label="item.label" :value="item.value" v-for="item in list" :key="item.value"></el-option>
    </el-select>
  </el-form-item>
      </div>
      
  <div style="width:320px">
    <el-form-item label="二级目录">
    <el-select v-model="formInline.catalogID" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in directoryList"></el-option>
      
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="标签">
    <el-select v-model="formInline.tags" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in tagList"></el-option>
      
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder="根据题干搜索" size="small" style="width: 240px;" @change="users()"></el-input>
  </el-form-item>
  </div>
  
  </el-row>
  <el-row  type="flex" class="row-bg" justify="space-between">
    <div style="width:320px">
      <el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in testList"></el-option>
      
    </el-select>
  </el-form-item>
    </div>
    
  <div style="width:320px">
    <el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.label" :value="item.value" v-for="item in difficultyList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
  <div style="width:320px">
    <el-form-item label="方向">
    <el-select v-model="formInline.direction" placeholder="请选择" size="small" style="width: 240px;">
      
      <el-option :label="item" :value="index"  v-for="(item,index) in directionList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
  <div style="width:320px">
    <el-form-item label="录入人">
    <el-select v-model="formInline.creatorID" placeholder="请选择" size="small" style="width: 240px;">
      <el-option :label="item.username" :value="item.id" v-for="item in userList"></el-option>
    </el-select>
  </el-form-item>
    </div>
  
</el-row>
<el-row  type="flex" class="row-bg" justify="space-between">
  <div style="width:320px">
    <el-form-item label="题目备注">
    <el-input v-model="formInline.remarks"  size="small" style="width: 240px;"></el-input>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName"  size="small" style="width: 240px;"></el-input>
  </el-form-item>
  </div>
  
  <div style="width:320px">
    <el-form-item label="城市">
    <el-select v-model="formInline.province" placeholder="请选择" size="small" style="width: 120px;"  @change="citys">
      <el-option :label="item" :value="item"  v-for="(item,index) in cityList"></el-option>
    </el-select>
    <el-select v-model="formInline.city" placeholder="请选择" size="small" style="width: 120px;">
      <el-option :label="item" :value="index"  v-for="(item,index) in areaList"></el-option>
    </el-select>
  </el-form-item>
  </div>
  
  <div style="width:320px; " >
    <el-form-item style="margin-left: 100px; float:right;">
    <el-button  size="small"  @click="onSubmit" >清除</el-button>
    <el-button  size="small" type="primary" @click="search">搜索</el-button>
  </el-form-item>
  </div>
</el-row>
</el-form>

<!-- 列表样式 -->
<el-alert
    
    type="info"
    :closable="false"
    show-icon
    style="margin-bottom: 15px;"
    >
    数据一共{{ listData2.length }}条
  </el-alert>

  <el-table
      :data="listData"
      style="width: 100%"
      :header-cell-style="{ background: '#fafafa'}"
      >
      <el-table-column
        prop="number"
        label="试题编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        v-slot:default="{row}">
      {{ row.questionType |  filtration}}
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        v-slot:default="{row}"
        >
        <div v-html="row.question"></div>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        v-slot:default="{row}">
        {{ row.addDate | renderTime }}
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        v-slot:default="{row}"
        >
        {{ row.questionType |  difficulty}}
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        width="180"
        v-slot:default="{row}"
        >
        <el-button type="primary  " icon="el-icon-view" circle size="mini " plain  title="预览" @click="preview(row)"></el-button>
        <el-button type="success" icon="el-icon-edit" circle size="mini " plain title="修改" @click="datail(row)" ></el-button>
        <el-button type="danger" icon="el-icon-delete" circle size="mini " plain title="删除" @click="dele(row)" ></el-button>
        <el-button type="warning " icon="el-icon-check" circle size="mini " plain title="加入精选" @click="select(row)"></el-button>
      </el-table-column>
    </el-table>

    <preview :showDialog.sync="showDialog" :previewList="previewList"></preview>


    <el-pagination
       background
       layout="prev, pager, next,sizes,jumper"
       :total="listData2.length"
       class="Pagination"
       :page-sizes="[5, 10,20,50]"
       :page-size="5"
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
       >
    </el-pagination>

  </el-card>
  </div>
</template>

<script>
import {simple} from '../../api/hmmm/subjects'
import {simple as directory} from '../../api/hmmm/directorys'
import {simple as tag} from '../../api/hmmm/tags'
import {simple as users} from '../../api/base/users'
import {provinces,citys} from '../../api/hmmm/citys'
import {difficulty,questionType,direction} from '../../api/hmmm/constants'
import {list,detail,remove,choiceAdd} from '../../api/hmmm/questions'
import preview from './components-questions/preview.vue'
export default {
  filters: {
    filtration(value){
      return questionType.find(item => {
        
          return item.value === +value
        
        
      } ).label
    },
    difficulty(value){
      return difficulty.find(item => {
        
          return item.value === +value
        
        
      } ).label
    },
    renderTime(date) {
       var time = new Date(date).toJSON();
         return new Date(+new Date(time) + 8 * 3600 * 1000)
           .toISOString()
           .replace(/T/g, " ")
           .replace(/\.[\d]{3}Z/, "");
     },
  },
  components: {
    preview
  },
  data() {
      return {
        formInline: {
          user: '',
          region: ''
        },
        list: [], //学科列表
        directoryList: [], //目录列表
        tagList: [], //标签列表
        testList: questionType, //试题
        difficultyList: difficulty, //难度
        directionList: direction, //方向
        userList: [], //题目作者
        cityList: [], //城市
        areaList: [], //地区
        listData: [], //列表数据
        listData2: [],
        showDialog: false,
        previewList: [], //预览列表
      }
    },
    watch: {
     
    },
    created() {
      this.simple()
      this.provinces()
      this.tableList()
      this.tableList2()
    },
    methods: {
      onSubmit() {
       this.formInline = {}
       this.$refs.from.resetFields()
      },
     async search(){
       const res = await list({...this.formInline,page: 1,pagesize: 5})
      //  console.log(res);
       this.listData = res.data.items
      },

      async simple() {
        try{
          const res = await simple()
          this.list = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },

      async directory(id) {
        try{
          const res = await directory({subjectID: id})
          this.directoryList = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },

      async tag(id) {
        try{
          const res = await tag({subjectID: id})
          this.tagList = res.data
          // console.log(res);
        }catch(err) {
          console.log(err);
        }
      },
      async users() {
        try{
          const res = await users({keyword: this.formInline.user})
          // console.log(res);
          this.userList = res.data
        }catch(err) {
          console.log(err);
        }
      },
      provinces() {
       this.cityList =  provinces()
      },
      citys(value){
        // console.log(value);
        
       this.areaList = citys(value)
      },
     async tableList(page,quantity){
       const res =  await list({page: page? page : 1,pagesize: quantity? quantity: 5})
      //  console.log(res);
       this.listData = res.data.items
      // this.detail(res.data.items)
      },
      async tableList2(){
       const res =  await list({page:  1,pagesize: 99999})
      //  console.log(res);
       this.listData2 = res.data.items
      // this.detail(res.data.items)
      },
       handleCurrentChange(page) {
      this.tableList(page)
      },
      handleSizeChange(quantity){
        this.tableList(1,quantity)
      },
     async preview(data) {
      this.showDialog = true
      const res = await detail(data)
      console.log(res);
      this.previewList = res.data
      },
      async dele(data) {
        this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await remove(data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.tableList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
      },
      async select(data) {
        this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          data.choiceState = 1
          await choiceAdd(data)
          this.$message({
            type: 'success',
            message: '加入成功!'
          });
          this.tableList()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消加入'
          });          
        });
       
      },
      datail(data) {
        this.$router.push({path: '/questions/new',query: {id: data.id}})
        this.$message.success('跳转成功')
      }
    }

}
</script>

<style scoped lang='scss'>
.container-Problem{
  padding: 15px;
  padding-right: 10px;
  padding-left: 10px;
  .Pagination{
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
::v-deep .el-pagination__jump{
  margin: 0;
}
</style>
